<template>
  <osc-navpage
    class="personal-root"
    title="增加原料"
    height="100"
    titleColor="#000"
    backgroundColor="#eff3f2"
    leftItemSrc="https://github.com/osmartian/weex-frame/blob/master/src/views/personal/imgs/common_goback.png?raw=true"
    @naviBarLeftItemClick="naviBarLeftItemClick">

    <div class="panel">
      <text class="text">原料名称:</text>
      <input ref="input" class="input" type="text"  name="goodsName" @input="ongoodsName" :value="goodsName"></input>
    </div>
    

    <div class="panel">
      <text class="text">原料单位:</text>
      <input ref="input" class="input" type="text"  name="unit" @input="onunit" :value="unitName"></input>
    </div>
  
    <div class="panel">
      <text class="text">原料条形:</text>
      <input ref="input" class="input" type="tel"  name="barcode" @input="onbarcode" :value="barCode"></input>
    </div>

    <div class="btn" @click="save">
        <text class="text-save">保存</text>
    </div>
  </osc-navpage>   
</template>

<script>
import route from 'router/page'
import mixins from 'mixins'

const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const stream = weex.requireModule('stream')

export default {
  mixins: [mixins],
  methods: {
    naviBarLeftItemClick () {
      this.router.pop()
    },
    save () {

      return stream.fetch({
          method: 'POST',
          type: 'JSON',
          url: this.imgUrl.collect.computerUrl + 'saveGoods',
          body: 'name='+ this.goodsName + '&unit_name=' + this.unitName + '&bar_code=' + this.barCode+'&entity_id=100010'
        }, callback => {
 
          if (callback.status == 200 && callback.data != null && callback.data != '') {
          
            modal.toast({
              message: '保存成功' + this.goodsName + this.unitName,
              duration: 0.3
            })
            
            this.router.pop()
            this.router.pop()
            // 跳转到主页
            this.router.push({
              page: this.routerPage.goods
            })
          } else {
              modal.alert({
                message: '网络异常，请重试~',
                duration: 0.3
              }, callback => {})
          }
        })
    },
    ongoodsName (event) {
      this.goodsName = event.value
    },
    onunit (event) {
      this.unitName = event.value
    },
    onbarcode (event) {
      this.barCode = event.value
    }
  }
}
</script>


<style>
   .btn {
    justify-content: center;
    align-items: center;
    height: 90px;
    width: 350px;
    background-color: #00CC00;
    border:2px solid;
    border-radius:10px;
    margin-top: 50px;
    margin-left: 200px;
  }
  .text-save {
    flex-direction: row;
    font-size: 50px;
    color: #ffffff;
  }
  .panel {
    width: 750px;
    height: 150px;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .text {
    font-size: 40px;
  }
  .save {
    font-size: 40px;
  }
  .input {
      margin-left: 10px;
      font-size: 42px;
      width: 400px;
      height: 100px;
      color: #0000FF;
  }
  .login-btn {
      margin-left: 200px;
      justify-content: center;
      align-items: center;
      height: 80px;
      width: 300px;
      background-color: #DDDDDD;
      border:5px solid;
      border-radius:10px;
      margin-top: 30px;
  }
</style>